* {
    margin: 0;
    padding: 0;
}

img {
    border: 0;
}

body {
    font-family: "微软雅黑";
}

.reco-con,
.bri_con,
.rank_con,
.foot_con,
.head_con,
.movie_con {
    width: 1200px;
    margin: 0 auto;
}

#song {
    width: 1005;
    height: 570px;
    background-color: #F5F5F5;
}

.reco-con {
    width: 1200px;
    height: 100%;
    margin: 0 auto;
}

.lunbo {
    width: 1200px;
    height: 400px;
    margin: auto;
}

.lunbo img {
    width: 224px;
    height: 224px;
}

.wrapper {
    display: flex;
    position: relative;
    left: 0;
    top: 0;
}

#swiper1 {
    width: 100%;
    height: 100%;
}


/* .lunbo .swiper-pagination-bullets.swiper-pagination-horizontal {
    bottom: 310px;
    left: 0;
    width: 100%;
} */

.tit {
    font-size: 30px;
    color: #333;
    letter-spacing: 14px;
    text-align: center;
    line-height: 30px;
    margin-bottom: 34px;
}

.tit_tab {
    height: 50px;
    text-align: center;
}

.tit_tab a:first-child {
    color: #31c27c;
}

.tit_tab a {
    margin: 0 24px;
}

.tit_tab a:hover {
    color: #31c27c;
}

ul,
li {
    list-style: none;
}

a {
    color: #333;
    text-decoration: none;
}

.song-reco,
.new_song,
.brilliant,
.new_disc,
.rank,
.foot,
.movie {
    padding: 51px 0px 50px 0px;
}

.reco-list {
    overflow: hidden;
}

.reco-list li {
    width: 224px;
    float: left;
    margin-right: 20px;
}

.reco-list .nomargin {
    margin-right: 0px;
}

.list_pic img {
    width: 224px;
    vertical-align: top;
}

.play_name:hover .ico_play {
    background-image: url("../image/ico_play.png");
}

.ico_play {
    position: absolute;
    margin: 82px 82px;
    width: 60px;
    height: 60px;
}

.list_tit {
    font-size: 14px;
    font-weight: normal;
    line-height: 28px;
    margin-top: 6px;
}


/*新歌首发*/

.tab {
    overflow: hidden;
    padding-left: 360px;
    margin-bottom: 39px;
}

.tab a {
    font-size: 14px;
    line-height: 22px;
    float: left;
    margin-right: 52px;
}

#swiper3 {
    width: 1200px;
    height: 240px;
}

#swiper3 img {
    width: 590px;
    height: 236px;
}


/*新碟首发*/

.disc_con {
    width: 100%;
    margin: 0 auto;
}

.new_disc .tab {
    padding-left: 350px;
    margin-bottom: 39px;
}

.lunbo1 {
    width: 1200px;
    height: 400px;
    margin: 0 auto;
}

#swiper2 {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.song_list {
    width: 380px;
    height: 340px;
}

.song_list li {
    padding: 12px 0px;
    overflow: hidden;
    border-bottom: 1px solid #f2f2f2;
    width: 380px;
    float: left;
    margin-right: 30px;
}

.disc_list {
    width: 1220px;
    height: 640px;
    margin: auto;
}

.disc_list .swiper-slide span {
    display: inline-block;
    width: 210px;
    height: 600px;
}

.pic,
.txt,
.time {
    float: left;
}

.pic {
    width: 86px;
    height: 86px;
}

.pic img {
    width: 86px;
}

.txt {
    padding: 19px 0px 17px 0px;
    width: 200px;
    margin: 0px 38px 0px 14px;
}

.txt h3 {
    font-size: 14px;
    line-height: 25px;
    font-weight: normal;
    text-overflow: ellipsis;
    /* 单行文本 */
    overflow: hidden;
    /* 溢出隐藏、清除浮动、解决外边距塌陷等等；这里是溢出隐藏 */
    white-space: nowrap;
    /* 规定h3标签不换行 */
}

.txt p {
    font-size: 14px;
    line-height: 25px
}

.txt p a {
    color: #999;
}

.time {
    font-size: 14px;
    color: #999;
    line-height: 86px;
}

.song_list .nomargin {
    margin-right: 0px;
}


/*精彩推荐*/

.bri_list {
    overflow: hidden;
}

.bri_list li {
    width: 590px;
    height: 235px;
    float: left;
}

.bri_list .flo_rig {
    float: right;
}

.bri_list li img {
    width: 590px;
}


/*新碟首发*/

.disc_list {
    overflow: hidden;
}

.disc_list li {
    width: 210px;
    height: 280px;
    float: left;
    margin-right: 30px;
}

.play_pic {
    width: 210px;
    height: 210px;
}

.play_pic img {
    width: 210px;
}

.playlist_item {
    width: 240px;
    height: 300px;
    padding-bottom: 15px;
}


/*.playlist_item .play_pic {*/


/*  position: relative;*/


/*  !*margin-right: 30px;*!*/


/*}*/

.playlist_item .playlist_title {
    /*float: left;*/
    max-width: 100%;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 22px;
    max-height: 44px;
}

.playlist_title h4 {
    margin-top: 4px;
}

.playlist_title_txt a {
    font-size: 14px;
}

.playlist_item .playlist_author {
    max-width: 100%;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 22px;
    max-height: 44px;
}

.playlist_item .playlist_author a {
    color: #999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 22px;
    font-size: 14px;
}


/*排行榜*/

.rank_list {
    overflow: hidden;
}

.list_item {
    width: 164px;
    height: 430px;
    margin-right: 20px;
    float: left;
    /*精灵图，通过background-position调整图片对应位置*/
    /*no-repeat属性是不让图片重复*/
    background: url(../img/beijing.webp) no-repeat;
    padding: 70px 30px 0px;
}

.two {
    background-position: 0px 0px;
}

.three {
    background-position: -224px 0px;
}

.four {
    background-position: -448px 0px;
}

.five {
    background-position: -672px 0px;
}


/* .sex{
  background-position: -1238px 0px;
} */

.rank_list .nomargin {
    margin-right: 0px;
}

.list_item h3 {
    font-size: 26px;
    line-height: 58px;
    color: #fff;
    font-weight: 400;
    text-align: center;
}

.list_item h3:before {
    content: "";
    display: block;
    width: 66px;
    height: 22px;
    margin: 0 auto 9px;
    background-image: url(../img/dfb.png);
    background-position: 0 -300px;
    background-size: 196px 340px;
}

.list_item i {
    display: block;
    width: 36px;
    height: 2px;
    background-color: #fff;
    margin: 32px auto;
}

.item_del li {
    font-size: 13px;
    color: #fff;
    overflow: hidden;
    margin-bottom: 20px;
}

.item_del .num {
    line-height: 29px;
    float: left;
    width: 20px;
}

.item_del .del_txt {
    float: left;
    width: 144px;
}

.del_txt p {
    line-height: 29px;
    text-overflow: ellipsis;
    overflow: hidden;
    /* 溢出隐藏、清除浮动、解决外边距塌陷等等；这里是溢出隐藏 */
    white-space: nowrap
}

.del_txt p a {
    color: #fff;
}

.del_txt p a:hover {
    color: #fff;
}


/*底部*/

.foot {
    background: #333;
}

.foot a {
    color: #999;
    display: block;
}

.bt {
    font-size: 15px;
    font-weight: 500;
    line-height: 77px;
    margin-bottom: 12px;
}

.down_list {
    overflow: hidden;
}

.down_item {
    float: left;
}

.down_item i {
    display: block;
    background: url("../img/footer@2x.39e8338d.png") no-repeat;
    background-size: 800px 96px;
    margin: 0px 29px;
    height: 33px;
}

.item01 {
    margin-left: -23px;
}

.item01 i {
    width: 37px;
    height: 47px;
    background-position: 0px 0px;
    background-color: rgb(58, 58, 58);
}

.item01 a:hover i {
    background-position: -0px -49px;
}

.item01 a:hover span {
    color: #31c27c;
}

.item02 i {
    width: 50px;
    height: 47px;
    background-position: -92px 0px;
}

.item02 a:hover i {
    background-position: -92px -49px;
}

.item02 a:hover span {
    color: #31c27c;
}

.item03 i {
    width: 37px;
    height: 47px;
    background-position: -190px -0px;
}

.item03 a:hover i {
    background-position: -190px -49px;
}

.item03 a:hover span {
    color: #31c27c;
}

.item04 i {
    width: 36px;
    height: 47px;
    background-position: -279px -0px;
}

.item04 a:hover i {
    background-position: -279px -49px;
}

.item04 a:hover span {
    color: #31c27c;
}

.download {
    width: 438px;
}

.pro {
    width: 370px;
    margin-right: 80px;
}

.down_item span {
    display: block;
    font-size: 14px;
    line-height: 40px;
    text-align: center;
}

.con_top {
    overflow: hidden;
    padding-bottom: 30px;
    border-bottom: 1px solid #353535;
}

.download,
.pro {
    float: left;
}

.pro .item001 {
    margin-left: -24px;
}

.pro .item001 i {
    width: 41px;
    height: 48px;
    background-position: -370px 0px;
}

.item001 a:hover i {
    background-position: -370px -49px;
}

.item001 a:hover span {
    color: #31c27c;
}

.pro .item002 i {
    width: 37px;
    height: 48px;
    background-position: -463px -0px;
}

.item002 a:hover i {
    background-position: -463px -48px;
}

.item002 a:hover span {
    color: #31c27c;
}

.pro .item003 i {
    width: 40px;
    height: 48px;
    background-position: -563px -0px;
}

.item003 a:hover i {
    background-position: -563px -49px;
}

.item003 a:hover span {
    color: #31c27c;
}

.pro .item004 i {
    width: 40px;
    height: 48px;
    background-position: -650px 0px;
}

.item004 a:hover i {
    background-position: -650px -49px;
}

.item004 a:hover span {
    color: #31c27c;
}

.item_spec {
    margin-right: 33px;
}


/*合作链接*/

.link {
    width: 303px;
    float: left;
}

.link_list li {
    font-size: 14px;
    margin-bottom: 18px;
    line-height: 14px;
    min-width: 101px;
    float: left;
}

.link_list li a:hover {
    color: #31c27c;
}

.platform {
    width: 464px;
    float: left;
    margin-top: 52px;
}

.platform li {
    margin-right: 30px;
}

.copyright {
    font-size: 12px;
    color: #999;
    padding-top: 23px;
}

.copyright p {
    line-height: 20px;
    text-align: center;
}

.copyright p a {
    display: inline;
}

.copyright p a:hover {
    color: #31c27c;
}


/*头部*/

.head_con {
    position: relative;
    padding-top: 90px;
}

.logo {
    width: 170px;
    height: 46px;
    position: absolute;
    left: 0;
    top: 22px;
}

.logo a {
    display: block;
}

.logo img {
    width: 170px;
}

.top_list {
    font-size: 18px;
    overflow: hidden;
    position: absolute;
    left: 198px;
    top: 0px;
}

.top_list .top_list-none {
    box-sizing: border-box;
    width: 160px;
    height: 153px;
    position: relative;
    top: -20px;
    left: 20px;
    right: auto;
    font-size: 12px;
    z-index: 99;
    background-color: #fff;
    box-shadow: 0 0 4px rgb(0 0 0 / 35%);
    border-radius: 4px;
    display: none;
}

.top_list-none .top_list-nlist {
    width: 160px;
    height: 127px;
    margin: 9px 0 18px;
    max-height: none;
    overflow-y: hidden;
    position: absolute;
}

.top_list-nlist p {
    margin-left: 16px;
    margin-right: 0;
    padding: 5px 0;
    font-size: 12px;
    color: #000;
    line-height: 1.5;
}

.top_list-nlist i {
    display: inline-block;
    vertical-align: -3px;
    margin-right: 9px;
    width: 14px;
    height: 14px;
    background-image: url(../img/sprite_privilege@2x.c35364d5.png);
    background-size: 80px 160px;
}

.top_list-nlist .i02 {
    background-position: 0 -35px;
}

.top_list-nlist .i03 {
    background-position: 0 -70px;
}

.top_list-nlist #xiazai {
    box-sizing: border-box;
    display: block;
    margin: 0 auto;
    width: 135px;
    height: 25px;
    line-height: 25px;
    font-size: 12px;
    color: #fff;
    text-align: center;
    border-radius: 25px;
    background-color: #31c27c;
    background-image: linear-gradient(90deg, #24ccaa, #31c27c);
    margin-top: 15px;
}

.top_list li {
    float: left;
}

.top_list .current {
    background: #31c27c;
}

.top_list .current a {
    color: #fff;
}

.top_list .current a:hover {
    color: #fff;
}

.top_list a {
    color: #000;
    display: block;
    line-height: 90px;
    padding: 0px 20px;
}

.top_list a:hover {
    color: #31c27c;
}

.spec {
    width: 94px;
    position: relative;
}

.spec:hover #list-none {
    width: 90px;
}

.spec:hover .top_list-none {
    display: block;
}

.spec img {
    position: absolute;
    top: 18px;
    left: 56px;
    width: 38px;
    height: 14px;
}

.head_search {
    width: 218px;
    height: 36px;
    border: 1px solid #c9c9c9;
    border-radius: 2px;
    position: absolute;
    left: 720px;
    top: 26px
}

.sear_input {
    padding-left: 11px;
    height: 36px;
    line-height: 36px;
    border: none;
    outline: none;
    width: 174px;
    float: left;
}

.sear_input::placeholder {
    color: #757575;
    font-size: 10px;
}

button i {
    width: 17px;
    height: 17px;
    display: block;
    background: url("../image/mark-2.png") no-repeat;
    margin-left: 6px;
}

button {
    background: none;
    border: none;
    width: 33px;
    height: 36px;
    float: right;
}

button:hover i {
    background: url("../image/mark-3.png");
}

.head_right {
    position: absolute;
    left: 950px;
    top: 24px
}

.select__box778 li {
    height: 40px;
}

.head_right a {
    display: block;
    float: left;
}

.land {
    font-size: 16px;
    color: #000;
    line-height: 40px;
}

.open_v {
    font-size: 12px;
    color: #fff;
    width: 102px;
    height: 40px;
    line-height: 40px;
    background: #31c27c;
    border-radius: 2px;
    text-align: center;
    margin: 0px 5px 0px 8px;
    position: relative;
}


/*通过伪类，border设置小箭头*/

.open_v::after {
    content: "";
    width: 0px;
    height: 0px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 6px solid #fff;
    position: absolute;
    top: 16px;
    right: 8px;
}

.recharge {
    width: 57px;
    height: 38px;
    border: 1px solid #c9c9c9;
    border-radius: 2px;
    text-align: center;
    color: #000;
    font-size: 12px;
    line-height: 38px;
    position: relative;
    padding: 0 15px 0 10px;
}

.recharge::after {
    content: "";
    width: 0px;
    height: 0px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 6px solid #000;
    position: absolute;
    top: 14px;
    right: 9px;
}

.subnav {
    overflow: hidden;
    border-top: 1px solid #f2f2f2;
    padding-left: 230px;
}


/*.subnav {*/


/*  overflow: hidden;*/


/*}*/

.subnav li {
    line-height: 51px;
    height: 51px;
    font-size: 14px;
    float: left;
}

.subnav a {
    color: #000;
    display: block;
    line-height: 50px;
    padding: 0px 20px;
}

.subnav li a:hover {
    color: #31c27c;
}

.new_song,
.brilliant,
.new_disc,
.rank,
.movie {
    background: url("../image/background02.jpg") repeat-x;
}

.solide-Nav {
    position: absolute;
    top: 130px;
    height: 60%;
    left: 0;
    width: 100%;
    overflow: hidden;
}

.solide-Nav:hover .solide-left-Nav {
    left: 5px;
    transition-duration: 0.5s;
}

.solide-Nav:hover .solide-right-Nav {
    right: 5px;
    transition-duration: 0.5s;
}

.solide-left {
    width: 50%;
    position: absolute;
    top: 225px;
    left: 0;
    height: 50%;
}

.solide-left .solide-left-Nav {
    width: 79px;
    height: 108px;
    position: absolute;
    top: 50%;
    left: -80px;
    margin-top: -108px;
    background: #0000000D;
}

.solide-left .solide-left-Nav i {
    margin-top: -20px;
    width: 20px;
    height: 39px;
    display: block;
    background-image: url(../img/xuebi.png);
    background-position: -20px -120px;
    background-size: 200px 336px;
    position: absolute;
    top: 50%;
    left: 29px;
}


/*  */

.zui {
    width: 224px;
    height: 460px;
    display: inline-block;
}

.solide-right {
    width: 50%;
    position: absolute;
    top: 225px;
    right: 0;
    height: 50%;
}

.solide-right .solide-right-Nav {
    width: 79px;
    height: 108px;
    position: absolute;
    top: 50%;
    right: -80px;
    margin-top: -108px;
    background: #0000000D;
}

.solide-right .solide-right-Nav i {
    margin-top: -20px;
    width: 20px;
    height: 39px;
    display: block;
    background-image: url(../img/xuebi.png);
    background-position: 0px -120px;
    background-size: 200px 336px;
    position: absolute;
    top: 50%;
    left: 29px;
}


/*MV*/

.movie_tab {
    overflow: hidden;
    padding-left: 350px;
    margin-bottom: 39px;
    position: relative;
}


/*.movie_con{*/


/*  position: relative;*/


/*}*/

.movie_tab a {
    font-size: 14px;
    line-height: 22px;
    float: left;
    margin-right: 52px;
}

.movie_tab a:hover {
    color: #31c27c;
}

.index_more {
    position: absolute;
    right: 0;
    top: auto;
}


/*.index_more i:hover{*/


/*  background-position: -120px -60px;*/


/*}*/

.movie_tab .index_more a:hover i {
    background-position: -120px -60px;
}

.icon_index_arrow {
    display: inline-block;
    width: 7px;
    height: 12px;
    background-position: -120px -40px;
    margin-left: 6px;
}

.sprite {
    background-image: url(../img/xuebi.png);
}

.check:hover i {
    background-position: -120px -60px;
}

.movie_list {
    overflow: hidden;
}

.movie_list li {
    width: 224px;
    height: 210px;
    margin-bottom: 20px;
    float: left;
    margin-right: 20px;
}

.movie_list li img {
    width: 224px;
    height: 127px;
}

.movie_list .nomargin {
    margin-right: 0px;
}

.movie_list_title {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #000000;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.movie_list_singer {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 24px;
    font-weight: 400;
    font-size: 14px;
    color: #9b9b9b;
}

.movie_list_listen_icon {
    display: inline-block;
    width: 19px;
    height: 12px;
    background-position: -180px -20px;
    vertical-align: -1px;
    background-size: 200px 336px;
}

.movie_list_info span {
    margin: 0px 10px 0px 0px;
}

.movie_list_listen_icon sprite {
    background-image: url(../image/icon_sprite.630b3e60.png);
}

.movie_list_info i {
    font-size: 14px;
    color: #9b9b9b;
}

.movie_list_title:hover {
    color: #31c27c;
}

.movie_list_singer:hover {
    color: #31c27c;
}